<template>
    <div class="businessSelectConf_option">
        <div class="businessSelectConf_content">
            <Form ref="optionForm" :model="optionForm" :rules="optionFormValidate" :label-width="140">
                <div class="businessSelectConf">
                    <div class="common_br">
                        <h2 class="common_title" style="font-size: 15px;">业务选择配置</h2>
                        <div class="common_content">
                            <Row style="margin-left: 32%;">
                                <Col span="10">
                                    <FormItem label="业务名称:" prop="businessName">
                                        <Input v-model="optionForm.businessName" maxlength="32" style="width: 250px;"
                                               placeholder="请输入业务名称"/>
                                    </FormItem>
                                    <FormItem label="业务描述:" prop="businessDesc">
                                        <Input v-model="optionForm.businessDesc" maxlength="600" show-word-limit
                                               type="textarea"
                                               placeholder="请输入业务描述..." style="width: 350px;"/>
                                    </FormItem>
                                    <FormItem label="业务类型:" style="width: 600px" prop="businessType" @click="">
                                        <CheckboxGroup v-model="optionForm.businessType">
                                            <Checkbox label="01">
                                                <span>新车</span>
                                            </Checkbox>
                                            <Checkbox label="02">
                                                <span>二手车</span>
                                            </Checkbox>
                                        </CheckboxGroup>
                                    </FormItem>
                                    <FormItem label="车辆类型:" style="width: 600px" prop="carType">
                                        <CheckboxGroup v-model="optionForm.carType">
                                            <Checkbox label="00">
                                                <span>乘用车</span>
                                            </Checkbox>
                                            <Checkbox label="01">
                                                <span>LCV</span>
                                            </Checkbox>
                                            <Checkbox label="02">
                                                <span>中卡</span>
                                            </Checkbox>
                                            <Checkbox label="03">
                                                <span>重卡</span>
                                            </Checkbox>
                                        </CheckboxGroup>
                                    </FormItem>
                                    <FormItem label="车辆属性:" style="width: 600px" prop="carNature">
                                        <CheckboxGroup v-model="optionForm.carNature">
                                            <Checkbox label="01">
                                                <span>新车</span>
                                            </Checkbox>
                                            <Checkbox label="02">
                                                <span>挂牌车</span>
                                            </Checkbox>
                                            <Checkbox label="03">
                                                <span>二手车</span>
                                            </Checkbox>
                                            <Checkbox label="04">
                                                <span>认证二手车</span>
                                            </Checkbox>
                                            <Checkbox label="05">
                                                <span>试乘试驾车</span>
                                            </Checkbox>
                                        </CheckboxGroup>
                                    </FormItem>
                                    <FormItem label="运营方式:" style="width: 600px" prop="operateWay">
                                        <CheckboxGroup v-model="optionForm.operateWay">
                                            <Checkbox label="00">
                                                <span>无</span>
                                            </Checkbox>
                                            <Checkbox label="01">
                                                <span>网约车</span>
                                            </Checkbox>
                                        </CheckboxGroup>
                                    </FormItem>
                                    <FormItem label="挂靠方式:" style="width: 600px" prop="affiliatedWay">
                                        <CheckboxGroup v-model="optionForm.affiliatedWay">
                                            <Checkbox label="00">
                                                <span>无</span>
                                            </Checkbox>
                                            <Checkbox label="01">
                                                <span>第三方公司挂靠</span>
                                            </Checkbox>
                                            <Checkbox label="02">
                                                <span>个体工商挂靠</span>
                                            </Checkbox>
                                            <Checkbox label="03">
                                                <span>网约车挂靠</span>
                                            </Checkbox>
                                        </CheckboxGroup>
                                    </FormItem>
                                    <FormItem label="购车目的:" style="width: 600px" prop="carPurpose">
                                        <CheckboxGroup v-model="optionForm.carPurpose">
                                            <Checkbox label="00">
                                                <span>自用</span>
                                            </Checkbox>
                                            <Checkbox label="01">
                                                <span>商用</span>
                                            </Checkbox>
                                        </CheckboxGroup>
                                    </FormItem>
                                </Col>
                            </Row>
                            <Row style="margin-left: 45%;">
                                <Button type="info" icon="ios-bookmark" @click.native="jumpToList(optionForm)">
                                    保存
                                </Button>
                                <Button type="info" icon="ios-backspace-outline" @click="jump()">返回</Button>
                            </Row>
                            <Row>
                                <rule-tree/>
                            </Row>
                        </div>
                    </div>
                </div>
            </Form>
        </div>
    </div>
</template>

<script>
    import "../../../assets/css/base.css";
    import ruiRules from '_c/rui-auto/rui-rules/index'
    import {
        getInfo,
        saveBusinessConfInfo,
        updateBusinessConfInfo
    } from "../../../api/business-scenarios/businessScenariosApi";

    export default {
        name: 'businessSelectConf',
        components: {ruleTree: ruiRules},
        data() {
            const validateMultiple = (rule, value, callback) => {
                if (value.length < 1) {
                    return callback(new Error('不少于一项'));
                } else {
                    callback();
                }
            };
            const validateMultiple2 = (rule, value, callback) => {
                if (value.length > 1) {
                    return callback(new Error('不可多选'));
                } else {
                    callback();
                }
            };
            return {
                isAdd: false,
                //规则变量
                ruleName: '规则配置',
                ruleGroup: 'businessSelectGroup',
                businessScenario: '',
                ruleData: [],
                ruleId: '',
                ruleAtoms: [],
                dataLoad: false,
                //业务场景列表字段
                optionForm: {
                    id: '',
                    businessName: '',
                    businessDesc: '',
                    businessType: [],
                    carType: [],
                    carNature: [],
                    operateWay: [],
                    affiliatedWay: [],
                    carPurpose: [],
                },
                //校验
                optionFormValidate: {
                    businessName: [
                        {required: true, message: "业务名称不能为空", trigger: "blur"},
                        {type: 'string', message: "业务名称不能为空", trigger: "blur"}
                    ],
                    businessDesc: [
                        {required: true, message: "业务描述不能为空", trigger: "blur"},
                        {type: 'string', message: "业务描述不能为空", trigger: "blur"}
                    ],
                    carType: [
                        {validator: validateMultiple, trigger: "change",},
                        {validator: validateMultiple2, trigger: "change",}
                    ],
                    carNature: [
                        {validator: validateMultiple, trigger: "change",},
                        {validator: validateMultiple2, trigger: "change",}
                    ],
                    operateWay: [
                        {validator: validateMultiple, trigger: "change",},
                        {validator: validateMultiple2, trigger: "change",}
                    ],
                    affiliatedWay: [
                        {validator: validateMultiple, trigger: "change",},
                        {validator: validateMultiple2, trigger: "change",}
                    ],
                    carPurpose: [
                        {validator: validateMultiple, trigger: "change",},
                        {validator: validateMultiple2, trigger: "change",}
                    ],
                    businessType: [
                        {validator: validateMultiple, trigger: "change",},
                        {validator: validateMultiple2, trigger: "change",}
                    ]
                },
            }
        },

        mounted() {
            this.initGetParam();
        },
        methods: {
            //规则保存
            ruleSaved() {

            },
            initGetParam() {
                if (this.afs.getPageParams(this) != null && this.afs.getPageParams(this) !== "") {
                    this.optionForm.id = this.afs.getPageParams(this).id;
                    this.isAdd = this.afs.getPageParams(this).isAdd;
                }
                if (this.isAdd === false) {
                    this.getInfoById();
                }
            },
            getInfoById() {
                let param = {
                    id: this.optionForm.id
                }
                getInfo(param).then(res => {
                    if (res.code === "0000") {
                        this.optionForm = res.data;
                        this.optionForm.businessName = res.data.businessName;
                        this.optionForm.businessDesc = res.data.businessDesc;
                        this.optionForm.businessType = [res.data.businessType];
                        this.optionForm.carType = [res.data.carType];
                        this.optionForm.carNature = [res.data.carNature];
                        this.optionForm.operateWay = [res.data.operateWay];
                        this.optionForm.affiliatedWay = [res.data.affiliatedWay];
                        this.optionForm.carPurpose = [res.data.carPurpose];
                    }
                    ;
                });
            },

            jumpToList(optionForm) {
                this.$refs.optionForm.validate(async (valid) => {
                    console.log(this.isAdd);
                    if (valid) {
                        let param = {
                            id: this.optionForm.id,
                            businessName: this.optionForm.businessName,
                            businessDesc: this.optionForm.businessDesc,
                            businessTypeTemp: this.optionForm.businessType,
                            carTypeTemp: this.optionForm.carType,
                            carNatureTemp: this.optionForm.carNature,
                            operateWayTemp: this.optionForm.operateWay,
                            affiliatedWayTemp: this.optionForm.affiliatedWay,
                            carPurposeTemp: this.optionForm.carPurpose,
                        };
                        if (this.isAdd) {
                            //保存
                            saveBusinessConfInfo(param).then(res => {
                                if (res.code === "0000") {
                                    this.$Message.success("操作成功");
                                    this.afs.closeTab(this);
                                }
                                ;
                            });
                        } else if (this.isAdd === false) {
                            //更新
                            updateBusinessConfInfo(param).then(res => {
                                if (res.code === "0000") {
                                    //跳转到新页面
                                    this.$Message.success("操作成功");
                                    this.afs.closeTab(this);
                                }
                            });
                        }

                    }
                });
            },
            jump() {
                this.afs.closeTab(this);
            },
        }
    }
</script>
